<template>
	<div class="padding20">
		<el-row style="margin-bottom: 7px">
			<el-form :inline="true" :model="queryForm" @submit.native.prevent @keyup.enter.native="queryList">
				<el-form-item>
					<el-input
						prefix-icon="el-icon-search"
						v-model="queryForm.couponName"
						autocomplete="off"
						placeholder="请输入优惠券名称"
						clearable
					></el-input>
				</el-form-item>

				<el-form-item>
					<fortress-select
						v-model="queryForm.getType"
						:dictList="YesNoList"
						placeholder="请选择领取中心显示"
						clearable
						filterable
					></fortress-select>
				</el-form-item>
				<el-form-item v-show="collapse.flag">
					<fortress-select
						v-model="queryForm.useType"
						:dictList="CouponUseType_ordersList"
						placeholder="请选择消费方式"
						clearable
						filterable
					></fortress-select>
				</el-form-item>
				<el-form-item v-show="collapse.flag">
					<fortress-select
						v-model="queryForm.returnType"
						:dictList="CouponReturnType_ordersList"
						placeholder="请选择退回方式"
						clearable
						filterable
					></fortress-select>
				</el-form-item>
				<el-form-item v-show="collapse.flag">
					<fortress-select
						v-model="queryForm.timeLimit"
						:dictList="CouponTimeLimitType_ordersList"
						placeholder="请选择时间限制类型"
						clearable
						filterable
					></fortress-select>
				</el-form-item>
				<el-form-item v-show="collapse.flag">
					<el-date-picker
						v-model="queryForm.timeStart"
						type="datetime"
						placeholder="请选择开始时间"
						value-format="yyyy-MM-dd HH:mm:ss"
						clearable
					></el-date-picker>
				</el-form-item>
				<el-form-item v-show="collapse.flag">
					<el-date-picker
						v-model="queryForm.timeEnd"
						type="datetime"
						placeholder="请选择结束时间"
						value-format="yyyy-MM-dd HH:mm:ss"
						clearable
					></el-date-picker>
				</el-form-item>
				<el-form-item v-show="collapse.flag">
					<fortress-select
						v-model="queryForm.backType"
						:dictList="CouponBackType_ordersList"
						placeholder="请选择返利方式"
						clearable
						filterable
					></fortress-select>
				</el-form-item>

				<el-form-item v-show="collapse.flag">
					<fortress-select
						v-model="queryForm.limitGoodType"
						:dictList="CouponLimitType_ordersList"
						placeholder="请选择是否限制商品"
						clearable
						filterable
					></fortress-select>
				</el-form-item>
				<el-form-item v-show="collapse.flag">
					<fortress-select
						v-model="queryForm.limitGoodCateType"
						:dictList="CouponLimitType_ordersList"
						placeholder="请选择是否限制商品分类"
						clearable
						filterable
					></fortress-select>
				</el-form-item>
				<el-form-item v-show="collapse.flag">
					<fortress-select
						v-model="queryForm.isLimitLevel"
						:dictList="YesNoList"
						placeholder="请选择是否限制会员级别 "
						clearable
						filterable
					></fortress-select>
				</el-form-item>
				<el-form-item v-show="collapse.flag">
					<el-select v-model="queryForm.status" placeholder="请选择状态" clearable>
						<el-option label="启用" :value="true"></el-option>
						<el-option label="禁用" :value="false"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="medium" icon="el-icon-search" @click="queryList({ current: 1 })">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="medium" icon="el-icon-refresh-left" @click="resetQueryForm">重置</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="text" @click="handleCollapseState">
						{{ collapse.label }}
						<i :class="collapse.icon"></i>
					</el-button>
				</el-form-item>
			</el-form>
			<el-button
				type="primary"
				size="medium"
				icon="el-icon-plus"
				v-if="$tools.hasPermission('orders:saleCoupon:save')"
				@click="handleEdit()"
			>
				添加
			</el-button>
			<el-button
				v-if="$tools.hasPermission('orders:saleCoupon:deleteBatch')"
				size="medium"
				type="danger"
				icon="el-icon-delete"
				@click="handleDeleteBatch()"
			>
				删除
			</el-button>
			<div style="float: right; padding-right: 17px">
				<i class="el-icon-download" style="margin-right: 10px; cursor: pointer" @click="handleExport"></i>
				<i class="el-icon-refresh" style="margin-right: 10px; cursor: pointer" @click="refresh"></i>

				<el-popover placement="bottom" width="180" trigger="click" title="列展示" popper-class="columnShows">
					<el-checkbox-group v-model="tableShowList">
						<el-checkbox v-for="item in tableList" :label="item.propName" :key="item.propName" :value="item.propName">
							{{ item.propDesc }}
						</el-checkbox>
					</el-checkbox-group>
					<i slot="reference" class="el-icon-s-operation" style="cursor: pointer"></i>
				</el-popover>
			</div>
		</el-row>
		<el-table ref="multipleTable" :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border>
			<el-table-column type="selection" width="55" show-overflow-tooltip></el-table-column>

			<el-table-column
				v-if="$tools.isShow('couponName', tableShowList)"
				prop="couponName"
				label="优惠券名称"
				:show-overflow-tooltip="true"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('getType', tableShowList)"
				prop="getType"
				label="领取中心显示"
				:show-overflow-tooltip="true"
				:formatter="getTypeFmt"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('getMax', tableShowList)"
				prop="getMax"
				label="每人限领张数"
				:show-overflow-tooltip="true"
			></el-table-column>
			<el-table-column v-if="$tools.isShow('getUrl', tableShowList)" prop="getUrl" label="领取卡券链接" :show-overflow-tooltip="true">
				<template #default="{row: {getUrl}}">
					{{ getUrl }}
					<fortress-copy :copy-data="getUrl"></fortress-copy>
				</template>
			</el-table-column>
			<el-table-column
				v-if="$tools.isShow('useType', tableShowList)"
				prop="useType"
				label="消费方式"
				:show-overflow-tooltip="true"
				:formatter="useTypeFmt"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('returnType', tableShowList)"
				prop="returnType"
				label="退回方式"
				:show-overflow-tooltip="true"
				:formatter="returnTypeFmt"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('enough', tableShowList)"
				prop="enough"
				label="消费满多少可用"
				:show-overflow-tooltip="true"
			>
				<template #default="{row: {enough}}">
					<template v-if="enough == 0">
						不限制
					</template>
					<template v-else>满 {{ enough }} 可用</template>
				</template>
			</el-table-column>
			<el-table-column
				v-if="$tools.isShow('timeLimit', tableShowList)"
				prop="timeLimit"
				label="时间限制类型"
				:show-overflow-tooltip="true"
				:formatter="timeLimitFmt"
			></el-table-column>
			<el-table-column v-if="$tools.isShow('timeDays', tableShowList)" prop="timeDays" label="时间可用" :show-overflow-tooltip="true">
				<template #default="{row: {timeDays}}">{{ timeDays }} 天</template>
			</el-table-column>
			<el-table-column
				v-if="$tools.isShow('timeStart', tableShowList)"
				prop="timeStart"
				label="开始时间"
				:show-overflow-tooltip="true"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('timeEnd', tableShowList)"
				prop="timeEnd"
				label="结束时间"
				:show-overflow-tooltip="true"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('backType', tableShowList)"
				prop="backType"
				label="返利方式"
				:show-overflow-tooltip="true"
				:formatter="backTypeFmt"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('deduct', tableShowList)"
				prop="deduct"
				label="立减"
				:show-overflow-tooltip="true"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('discount', tableShowList)"
				prop="discount"
				label="折扣"
				:show-overflow-tooltip="true"
			></el-table-column>
			<!-- <el-table-column
				v-if="$tools.isShow('desc', tableShowList)"
				prop="desc"
				label="介绍"
				:show-overflow-tooltip="true"
			></el-table-column> -->
			<el-table-column
				v-if="$tools.isShow('total', tableShowList)"
				prop="total"
				label="总发放数量"
				:show-overflow-tooltip="true"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('money', tableShowList)"
				prop="money"
				label="购买价格"
				:show-overflow-tooltip="true"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('credit', tableShowList)"
				prop="credit"
				label="消耗积分"
				:show-overflow-tooltip="true"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('displayOrder', tableShowList)"
				prop="displayOrder"
				label="排序"
				:show-overflow-tooltip="true"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('limitGoodType', tableShowList)"
				prop="limitGoodType"
				label="限制商品"
				:show-overflow-tooltip="true"
				:formatter="limitGoodTypeFmt"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('limitGoodCateType', tableShowList)"
				prop="limitGoodCateType"
				label="限制商品分类"
				:show-overflow-tooltip="true"
				:formatter="limitGoodCateTypeFmt"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('limitGoodCateIds', tableShowList)"
				prop="limitGoodCateIds"
				label="限制商品分类"
				:show-overflow-tooltip="true"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('isLimitLevel', tableShowList)"
				prop="isLimitLevel"
				label="限制会员级别 "
				:show-overflow-tooltip="true"
				:formatter="isLimitLevelFmt"
			></el-table-column>
			<!-- <el-table-column
				v-if="$tools.isShow('status', tableShowList)"
				prop="status"
				label="状态"
				:show-overflow-tooltip="true"
				:formatter="statusFmt"
			></el-table-column> -->
			<!-- <el-table-column
				v-if="$tools.isShow('createUser', tableShowList)"
				prop="createUserName"
				label="创建人"
				:show-overflow-tooltip="true"
			></el-table-column> -->
			<el-table-column
				v-if="$tools.isShow('createTime', tableShowList)"
				prop="createTime"
				label="创建时间"
				:show-overflow-tooltip="true"
			></el-table-column>
			<!-- <el-table-column
				v-if="$tools.isShow('isDeleted', tableShowList)"
				prop="isDeleted"
				label="是否删除"
				:show-overflow-tooltip="true"
				:formatter="isDeletedFmt"
			></el-table-column> -->
			<el-table-column label="操作" fixed="right" min-width="180">
				<template slot-scope="scope">
					<el-button v-if="$tools.hasPermission('orders:saleCoupon:send')" size="mini" plain @click="handleSend(scope.row)">
						手动发送
					</el-button>
					<el-button v-if="$tools.hasPermission('orders:saleCoupon:info')" size="mini" plain @click="handleInfo(scope.row.id)">
						详情
					</el-button>
					<el-button v-if="$tools.hasPermission('orders:saleCoupon:edit')" size="mini" plain @click="handleEdit(scope.row.id)">
						编辑
					</el-button>
					<el-button
						v-if="$tools.hasPermission('orders:saleCoupon:delete')"
						size="mini"
						plain
						type="danger"
						@click="handleDelete(scope.row)"
					>
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination :total="page.total" :current-page="page.current" :page-size="page.size" @refreshData="queryList"></pagination>
		<!-- 新增、编辑 -->
		<form-edit v-if="formEditVisible" ref="formEdit" @refreshData="queryList"></form-edit>
		<!--    手动发送-->
		<form-send v-if="sendVisible" ref="formSend" @refreshData="queryList"></form-send>
		<!-- 详情 -->
		<form-info v-if="formInfoVisible" ref="formInfo"></form-info>
	</div>
</template>
<script>
import { salecouponPage, salecouponDel, salecouponDelBatch, salecouponDynamicExport } from "@/api/orders/salecoupon.js"
import { viewTableList } from "@/api/public.api.js"
import FormEdit from "./salecoupon-edit"
import FormInfo from "./salecoupon-info"
import FormSend from "./salecoupon-send"
import FortressPagination from "@/components/fortress-pagination.vue"
import { enumList } from "@/api/public.api.js"

export default {
	data() {
		return {
			tableData: [],
			formEditVisible: false,
			sendVisible: false,
			formInfoVisible: false,
			queryForm: {
				couponName: "",
				getType: "",
				useType: "",
				returnType: "",
				timeLimit: "",
				timeStart: "",
				timeEnd: "",
				backType: "",
				deduct: "",
				discount: "",
				desc: "",
				limitGoodType: "",
				limitGoodCateType: "",
				isLimitLevel: "",
				status: "",
			},
			page: {
				current: 1,
				size: 10,
				total: 0,
			},
			collapse: {
				icon: "el-icon-arrow-down el-icon--right",
				label: "展开",
				flag: false,
			},
			tableList: [],
			tableShowList: [],
			YesNoList: [],
			CouponUseType_ordersList: [],
			CouponReturnType_ordersList: [],
			CouponTimeLimitType_ordersList: [],
			CouponBackType_ordersList: [],
			CouponLimitType_ordersList: [],
		}
	},
	components: {
		"form-edit": FormEdit,
		"form-info": FormInfo,
		"form-send": FormSend,
		pagination: FortressPagination,
	},
	created() {
		this.queryEnumList()
		this.initTableList()
		this.queryList()
	},
	methods: {
		queryEnumList() {
			this.YesNoList = []
			enumList("YesNo", "").then(resp => {
				if (resp.code == 0) {
					this.YesNoList = resp.data
				}
			})
			this.CouponUseType_ordersList = []
			enumList("CouponUseType", "orders").then(resp => {
				if (resp.code == 0) {
					this.CouponUseType_ordersList = resp.data
				}
			})
			this.CouponReturnType_ordersList = []
			enumList("CouponReturnType", "orders").then(resp => {
				if (resp.code == 0) {
					this.CouponReturnType_ordersList = resp.data
				}
			})
			this.CouponTimeLimitType_ordersList = []
			enumList("CouponTimeLimitType", "orders").then(resp => {
				if (resp.code == 0) {
					this.CouponTimeLimitType_ordersList = resp.data
				}
			})
			this.CouponBackType_ordersList = []
			enumList("CouponBackType", "orders").then(resp => {
				if (resp.code == 0) {
					this.CouponBackType_ordersList = resp.data
				}
			})
			this.CouponLimitType_ordersList = []
			enumList("CouponLimitType", "orders").then(resp => {
				if (resp.code == 0) {
					this.CouponLimitType_ordersList = resp.data
				}
			})
		},
		refresh() {
			this.tableData = []
			this.queryList({ current: 1 })
		},
		//查询表格数据
		queryList(page) {
			if (page) {
				this.page.current = page.current ? page.current : this.page.current
				this.page.size = page.size ? page.size : this.page.size
			}
			this.queryForm.current = this.page.current
			this.queryForm.size = this.page.size
			salecouponPage(this.queryForm).then(resp => {
				if (resp.code == 0) {
					this.tableData = resp.data.records
					this.page.total = resp.data.total
					//查询页大于总页数，重新查询
					let cu =
						this.page.total % this.page.size == 0
							? parseInt(this.page.total / this.page.size)
							: parseInt(this.page.total / this.page.size + 1)
					if (cu > 0 && this.page.current > cu) {
						this.queryList({ current: cu })
					}
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},
		handleSend(row) {
			this.sendVisible = true
			this.$nextTick(() => {
				this.$refs.formSend.init(row)
			})
		},
		//打开编辑窗口
		handleEdit(id) {
			this.formEditVisible = true
			this.$nextTick(() => {
				this.$refs.formEdit.init(id)
			})
		},
		//打开详情窗口
		handleInfo(id) {
			this.formInfoVisible = true
			this.$nextTick(() => {
				this.$refs.formInfo.init(id)
			})
		},
		//删除
		handleDelete(row) {
			this.$confirm("确认删除该记录, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					salecouponDel(row.id).then(resp => {
						if (resp.code == 0) {
							this.$message({
								type: "success",
								message: "操作成功!",
							})
							//判断是否最后一页的最后一条记录
							let totalPages =
								(this.page.total - 1) % this.page.size == 0
									? (this.page.total - 1) / this.page.size
									: (this.page.total - 1) / this.page.size + 1
							if (this.page.current > totalPages && this.page.current != 1) {
								this.page.current = this.page.current - 1
							}
							this.queryList()
						} else {
							this.$msg({
								message: resp.msg,
								type: "error",
							})
						}
					})
				})
				.catch(() => {})
		},
		//批量删除
		handleDeleteBatch() {
			let checkedRow = this.$refs.multipleTable.selection
			if (checkedRow.length > 0) {
				let ids = []
				checkedRow.forEach(item => {
					ids.push(item.id)
				})
				this.$confirm("确认删除该记录, 是否继续?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(() => {
						salecouponDelBatch(ids).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								//判断是否最后一页的最后一条记录
								let totalPages =
									(this.page.total - checkedRow.length) % this.page.size == 0
										? (this.page.total - checkedRow.length) / this.page.size
										: (this.page.total - checkedRow.length) / this.page.size + 1
								if (this.page.current > totalPages && this.page.current != 1) {
									this.page.current = this.page.current - 1
								}
								this.queryList()
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
					})
					.catch(() => {})
			} else {
				this.$msg({
					message: "请选择数据进行删除",
					type: "error",
				})
			}
		},
		//重置查询框
		resetQueryForm() {
			this.queryForm = {
				couponName: "",
				getType: "",
				useType: "",
				returnType: "",
				timeLimit: "",
				timeStart: "",
				timeEnd: "",
				backType: "",
				deduct: "",
				discount: "",
				desc: "",
				limitGoodType: "",
				limitGoodCateType: "",
				isLimitLevel: "",
				status: "",
			}
		},
		//切换查询条件收缩框
		handleCollapseState() {
			this.collapse.flag = !this.collapse.flag
			if (this.collapse.flag) {
				this.collapse.icon = "el-icon-arrow-up el-icon--right"
				this.collapse.label = "收起"
			} else {
				this.collapse.icon = "el-icon-arrow-down el-icon--right"
				this.collapse.label = "展开"
			}
		},
		//视图表格列表初始化
		initTableList() {
			viewTableList("sale_coupon").then(resp => {
				if (resp.code == 0) {
					this.tableList = resp.data
					this.tableList.forEach(item => {
						this.tableShowList.push(item.propName)
					})
				}
			})
		},
		//领取中心显示格式化返回
		getTypeFmt(row) {
			let name = ""
			if (this.YesNoList) {
				this.YesNoList.forEach(item => {
					if (item.code == row.getType) {
						name = item.name
					}
				})
			}
			return name
		},
		//消费方式格式化返回
		useTypeFmt(row) {
			let name = ""
			if (this.CouponUseType_ordersList) {
				this.CouponUseType_ordersList.forEach(item => {
					if (item.code == row.useType) {
						name = item.name
					}
				})
			}
			return name
		},
		//退回方式格式化返回
		returnTypeFmt(row) {
			let name = ""
			if (this.CouponReturnType_ordersList) {
				this.CouponReturnType_ordersList.forEach(item => {
					if (item.code == row.returnType) {
						name = item.name
					}
				})
			}
			return name
		},
		//时间限制类型格式化返回
		timeLimitFmt(row) {
			let name = ""
			if (this.CouponTimeLimitType_ordersList) {
				this.CouponTimeLimitType_ordersList.forEach(item => {
					if (item.code == row.timeLimit) {
						name = item.name
					}
				})
			}
			return name
		},
		//返利方式格式化返回
		backTypeFmt(row) {
			let name = ""
			if (this.CouponBackType_ordersList) {
				this.CouponBackType_ordersList.forEach(item => {
					if (item.code == row.backType) {
						name = item.name
					}
				})
			}
			return name
		},
		//是否限制商品格式化返回
		limitGoodTypeFmt(row) {
			let name = ""
			if (this.CouponLimitType_ordersList) {
				this.CouponLimitType_ordersList.forEach(item => {
					if (item.code == row.limitGoodType) {
						name = item.name
					}
				})
			}
			return name
		},
		//是否限制商品分类格式化返回
		limitGoodCateTypeFmt(row) {
			let name = ""
			if (this.CouponLimitType_ordersList) {
				this.CouponLimitType_ordersList.forEach(item => {
					if (item.code == row.limitGoodCateType) {
						name = item.name
					}
				})
			}
			return name
		},
		//是否限制会员级别 格式化返回
		isLimitLevelFmt(row) {
			let name = ""
			if (this.YesNoList) {
				this.YesNoList.forEach(item => {
					if (item.code == row.isLimitLevel) {
						name = item.name
					}
				})
			}
			return name
		},
		statusFmt(row) {
			let name = ""
			if (this.YesNoList) {
				this.YesNoList.forEach(item => {
					if (item.code == row.status) {
						name = item.name
					}
				})
			}
			return name
		},
		isDeletedFmt(row) {
			let name = "禁用"
			if (row.isDeleted == 1) {
				name = "启用"
			}
			return name
		},
		//可见字段excel导出
		handleExport() {
			if (!this.tableShowList || this.tableShowList.length < 1) {
				this.$msg({
					message: "请选择要导出的列",
					type: "error",
				})
				return
			}
			let colNum = 1
			let headerList = []
			this.tableShowList.forEach(item => {
				let nameData = this.tableList.find(item2 => {
					return item2.propName == item
				})
				let name = ""
				if (nameData && nameData.propDesc) {
					name = nameData.propDesc
				} else {
					name = "未定义字段" + colNum++
				}
				headerList.push({ name: name, code: item })
			})
			salecouponDynamicExport({ headerList: headerList, dto: this.queryForm })
		},
	},
}
</script>
<style scoped></style>
